<template>
  <el-dialog :visible="showDetailDialog" :title="'采购单编号：' + item.id" width="800px" @open="loadData" center :before-close="handleClose">
    <div style="border: 1px solid gainsboro;">
      <el-table height="300" :data="list">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" label-width="80">
              <el-form-item label="说明">
                <span>{{props.row.desc || '暂无说明'}}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="名称" width="130" prop="name"></el-table-column>
        <el-table-column label="分类" width="130" prop="cid" :formatter="row => categoryMap.get(row.cid)"></el-table-column>
        <el-table-column label="品牌" width="130" prop="brandId" :formatter="row => brandMap.get(row.brandId)"></el-table-column>
        <el-table-column label="单价" width="130" prop="price"></el-table-column>
        <el-table-column label="数量" min-width="120" prop="number"></el-table-column>
    </el-table>
    </div>
    <div style="margin-top: 10px;">
      <el-form label-position="left" label-width="80px" inline>
        <el-form-item label="合计">
          <div style="width: 280px;">{{totalFund + '元'}}</div>
        </el-form-item>
        <el-form-item label="批准金额">
          <el-input :disabled="!update" placeholder="请输入批准金额" clearable v-model="approvalFund">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer">
      <el-button :disabled="!update" type="success" @click="changeStatus(1)">批准申请</el-button>
      <el-button :disabled="!update" type="danger" @click="changeStatus(2)">退回申请</el-button>
    </div>
  </el-dialog>
</template>

<script>
import * as purchase from '@/api/purchase.js'

export default {
  name: 'PurchaseDetail',
  props: ['item', 'showDetailDialog', 'brandMap', 'categoryMap'],
  data () {
    return {
      list: [],
      approvalFund: 0,
      totalFund: 0
    }
  },
  computed: {
    update: function () {
      return this.item.status === 0
    }
  },
  methods: {
    /** 打开对话框时，加载数据 */
    loadData () {
      // 查询 detail 数据
      purchase.selectById(this.item.id).then(resp => {
        this.list = JSON.parse(resp.data.list)
        this.totalFund = this.getTotalFund()
        this.approvalFund = this.totalFund
      }).catch(() => {
        this.$notify.error('获取采购详情数据失败')
      })
    },
    // 计算总金额
    getTotalFund () {
      let sum = 0
      this.list.forEach(e => {
        sum += e.price * e.number
      })
      return sum
    },
    // 批准申请 / 退回申请
    changeStatus (status) {
      let data = { id: this.item.id, status }
      if (status === 1) {
        // 批准
        data.approvalFund = this.approvalFund
      }
      purchase.changeStatus(data).then(resp => {
        this.$notify.success('已完成审批')
        this.$emit('success')
        this.close()
      }).catch(() => {
        this.$notify.error('审批失败')
      })
    },
    /** 关闭对话框 */
    close () {
      this.list = []
      this.totalFund = 0
      this.approvalFund = 0
      this.$emit('update:showDetailDialog', false)
    },
    /** 关闭对话框前，更新prop */
    handleClose (done) {
      this.close()
      done()
    }
  }
}
</script>

<style>
</style>
